| 選擇器 | 用途 | 範例 |
|---|---|---|
:hover |
滑鼠移到元素上 | button:hover { background: blue; } |
:active |
點擊中的狀態 | a:active { color: red; } |
:focus |
元素獲得焦點（表單輸入中） | input:focus { border: 2px solid skyblue; } |
:visited |
使用者已點過的連結 | a:visited { color: purple; } |
:first-child |
父元素的第一個子元素 | p:first-child { font-weight: bold; } |
:last-child |
父元素的最後一個子元素 | p:last-child { color: gray; } |
:nth-child(n) |
選擇第 n 個子元素 | li:nth-child(2) { color: red; } |
:nth-of-type(n) |
選擇第 n 個相同型別的元素 | p:nth-of-type(3) { font-size: 20px; } |
:not(selector) |
排除符合條件的元素 | button:not(.primary) { opacity: 0.5; } |
:checked |
被勾選的表單元素 | input:checked { outline: 2px solid green; } |
:disabled |
被禁用的表單元素 | input:disabled { background: #eee; } |
:required |
必填的表單元素 | input:required { border: 2px dashed red; } |
| 選擇器 | 用途 | 範例 |
|---|---|---|
::before |
在元素前插入內容 | .title::before { content: "🔥 "; } |
::after |
在元素後插入內容 | .title::after { content: " ✅"; } |
::first-letter |
選第一個字母 | p::first-letter { font-size: 200%; } |
::first-line |
選第一行文字 | p::first-line { color: blue; } |
::selection |
選取文字時的樣式 | p::selection { background: yellow; } |
::placeholder |
表單 placeholder 樣式 | input::placeholder { color: gray; } |
::marker |
列表項目前的符號 | li::marker { color: red; } |
Pseudo-class = 狀態 → 使用者互動或結構位置。
Pseudo-element = 部分 → 虛擬生成或選中特定片段。
iThome鐵人賽
看影片追技術